<template>
	<div class="outerDiv">
		<div class="outes" style="background:#fff;height: 100vh;">
			<go-back aa='../teachers/tealogin'></go-back>
			<Header :right="false" contentTitle="填写信息"></Header>
			<scroller lock-x>
				<div class="main">
					<div class="childInfoWrap">
						<h4>请如实填写注册信息，以便使用各项功能</h4>
						<div class="sexRadio">
							<div class="radioBox flex-h">
				
								<div :class="['peopleType flex1',`${sex}`==='Ladyboy'?'active_3':'']" @click="tab('Ladyboy',1)">
									<span>我是教师</span>
								</div>
							</div>
						</div>
						<div class="inputListBox">
							<div class="flex-h absBox">
								<span class="flex-h flex1">
									<b>姓名</b>
									<input v-on:blur="blurAdjust" :placeholder="`${sex}`==='man'?'如是家长请填写子女姓名':`${sex}`==='woman'?'请填写真实姓名':'请填写真实姓名'"  type="text" class="flex-1"  v-model="sse"></span>
							</div>

							<div class="flex-h absBox">
								<span class="flex-h flex1 pos" style="position: relative;">
									<b>城市</b>
									<popup-picker :title="pick" v-show="true" @on-change="changes" @on-hide="onHide" class="popiker" :data="list3"
									 :columns="3" v-model="value4" show-name></popup-picker>

									<img src="~/static/images/collage_icon_arrow_right.png" class="imgIcon" alt="">
								</span>
							</div>
							<div class="flex-h absBox">
								<span class="flex-h flex1 pos">
									<b>学校</b>
									<popup-picker :title="pick1" v-show="true" @on-change="changes1" @on-hide="onHide1" class="popiker" :data="list2"
									 :columns="3" v-model="value5" show-name></popup-picker>

									<img src="~/static/images/collage_icon_arrow_right.png" class="imgIcon" alt="">
								</span>
							</div>
							<div class="flex-h absBox">
								<span class="flex-h flex1 pos">
									<b>年级</b>
									<popup-picker :title="pick2" v-show="true" @on-change="changes2" @on-hide="onHide2" class="popiker" :data="list1"
									 :columns="3" v-model="value6" show-name></popup-picker>

									<img src="~/static/images/collage_icon_arrow_right.png" class="imgIcon" alt="">
								</span>
							</div>

									<!-- <input v-on:blur="blurAdjust"  placeholder="请输入班级" v-model="classNames" type="text" class="flex-1"> -->
							<div class="flex-h absBox">
								<span class="flex-h flex1 pos">
									<b>班级</b>
									<popup-picker :title="pick3" v-show="true" @on-change="changes3" @on-hide="onHide3" class="popiker" :data="classList"
									 :columns="1" v-model="value7" show-name></popup-picker>
									<img src="~/static/images/collage_icon_arrow_right.png" class="imgIcon" alt="">
								</span>
							</div>

						</div>
						<Btn message="下一步" :col="yel" v-on:btnClick="commonJs.gosto('register_data',JSON.stringify(sendObj))"></Btn>
						<!-- <a style="display: block;text-align: center;margin-top: 0.2rem;font-size: 0.34rem; text-decoration: none;font-weight: bold;"
						 href="https://app.sx985.com/download">立即下载</a> -->
					</div>
				</div>
				<div style="width: 7.5rem;height: 1.5rem;"></div>
			</scroller>
		</div>
	</div>
</template>
<script>
	import {
		Scroller,
		PopupPicker,
		TransferDom,
		XDialog,
	} from 'vux'
	import JSEncrypt from 'jsencrypt/bin/jsencrypt'
	import axios from '~/plugins/axios';
	import Btn from '~/components/Btn'
	import Header from '~/components/Header'
	import goBack from '~/components/goBack'
	export default {
		head: {
			title: "注册"
		},
		directives: {
			TransferDom
		},
		components: {

			Btn,
			Scroller,
			PopupPicker,
			XDialog,
			Header,
			goBack

		},
		watch: {
			sse(e) {
				if (e == '') this.yel = 'cancel';
				if (this.areaid !== '' && this.classNames !== "" && e !== "" && this.schoolid !== "" && this.userType !== "" &&
					this.gradeid !== "") {
					this.yel = "sure";
				}
				this.sendObj.sse = e;
			},
			classNames(e) {
				if (e == '') this.yel = 'cancel';
				this.sendObj.classNames = this.classNames;
				if (this.areaid !== '' && this.classNames !== "" && this.sse !== "" && this.schoolid !== "" && this.userType !== "" &&
					this.gradeid !== "") {
					this.yel = "sure";
				}
			}
		},
		data() {
			return {
				sse: '',
				value5: [],
				value6: [],
				value7: [],
				list2: [],
				list1: [{
					name: '高一',
					value: '1'
				}, {
					name: '高二',
					value: '2'
				}, {
					name: '高三',
					value: '3'
				}],
				classList: [],
				areaid: '',
				cityid: '',
				classNames: '',
				provinceid: '',
				schoolid: '',
				gradeid: '',
				userType: 2,
				pick: '请选择所在地区',
				pick1: '请选择所在学校',
				pick2: '请选择所在年级',
				pick3: '请输入班级',
				show12: false,
				show1: false,
				show2: true,
				sex: 'Ladyboy',
				showmsg: "添加",
				yel: 'cancel', // cancel --- sure
				list3: [],
				value4: [],
				provice: [],
				citys: [],
				sendObj: {},
			}
		},
		mounted: function() {
			this.$vux.loading.show({
				text: '正在加载'
			})
			this.getCascadeArea();
			this.createClassNames();
			console.log('classLsit', this.classList)
			this.sendObj.userType = this.userType;
			if(this.commonJs.isTerminal()=='isAndroid'){
				if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
				window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
			}
			}
		},
			destroyed() {
	
			window.removeEventListener('popstate', this.fun, false); //false阻止默认事件
		},
		methods: {
			createClassNames() {
				let singleClassName = ''
				for (let i = 1; i < 101; i ++) {
					singleClassName = {
						name: i + '班',
						value: i + '班'
					};
					this.classList.push(singleClassName);
				}
			},
			fun() {
				this.$router.replace({
					path: '../teachers/tealogin'
				
				})
			
			},
			blurAdjust(e) {
				// 文本框失去焦点
				this.isFocus = false;
				setTimeout(() => {
					if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
						return
					}
			 
					let result = 'pc';
					if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
						result = 'ios'
					} else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
						result = 'android'
					}
			 
					if (result = 'ios') {
						document.activeElement.scrollIntoViewIfNeeded(true);
					}
				}, 20)
			},
			changes(e) {
				this.areaid = e[2] * 1;
				this.provinceid = this.provice[parseInt(e[0])].id;
				this.cityid = this.citys[parseInt(e[1])].id;
				this.classNames = "";
				// 给发送的数据赋值
				this.sendObj.provinceid = this.provinceid;
				this.sendObj.cityid = this.cityid;
				this.sendObj.areaid = this.areaid;
			},
			changes1(e) {
				this.schoolid = e[0] * 1;
				// 给发送的数据赋值
				this.sendObj.schoolid = this.schoolid;
			},
			changes2(e) {
				this.gradeid = e[0] * 1;
				// 给发送的数据赋值
				this.sendObj.gradeid = this.gradeid;
			},
			changes3(e) {
				this.classNames = e[0];
				this.sendObj.classNames = this.classNames;
			},

			goto(routerName, queryData) {
				this.$router.push({
					path: routerName,
					query: {
						type: queryData
					}
				});
			},
			showMenu() {
				this.show12 = true;
			},
			onHide(type) {
				console.log(1111111)
				type == true ? this.pick = '' : this.pick = this.pick;
				if (type == true) {
					this.list2 = [];
					this.pick1 = "请选择学校"
					this.getAreaSchool();
				}

			},
			onHide1(type) {
				type == true ? this.pick1 = '' : this.pick1 = this.pick1;
				
			},
			onHide2(type) {
				type == true ? this.pick2 = '' : this.pick2 = this.pick2;
			},
			onHide3(type) {
				type == true ? this.pick3 = '' : this.pick3 = this.pick3;
			},
			tab(sexs, tabIndex) {
				// if(routerName==='door'){this.$vux.toast.text('暂未开放');return;}
				this.sex = sexs
				sexs === 'man' ? this.userType = 2 : this.userType = 1;
				sexs === 'man' ? this.userType = 2 : sexs === 'woman' ? this.userType = 1 : this.userType = 3;
				console.log('this.userType',this.userType)
				this.sendObj.userType = this.userType;


			},
			showLoading() {
				this.$vux.loading.show({
					text: 'Loading'
				})
				setTimeout(() => {
					this.$vux.loading.hide()
					this.show2 = false;
					this.show1 = true;
				}, 1000)
			},
			showRight() {
				this.showLoading()
			},
			cancle() {
				this.show2 = true;
				this.show1 = false;

			},

			getAreaSchool() {
				axios.post('/area/getSchoolsById/' + this.areaid, {}).then(res => {
					let school = res.data;
					school.forEach(item => {
						this.list2.push({
							name: item.schoolName,
							value: item.schoolId + ''
						})
					})
					this.$vux.loading.hide()
					console.log('schoolres', res)

				}).catch(() => {
					this.$vux.loading.hide();
					// this.$vux.toast.text('getCascadeArea失败1');
				})
			},
			getCascadeArea() {
				axios.post('/area/getCascadeArea', {


				}).then(res => {
					let areaData = res.data;
					let arrArea = [];
					let arrCity = [];
					let ary = [];
					let are = [];
					areaData.forEach((item, index) => {
						arrArea.push({
							name: item.lable,
							value: index + 'ew',
							parent: 0
						})
						this.provice.push(item);
						arrCity.push(item.list)
					})

					arrCity.forEach((its, index) => {

						its.forEach((i, $index) => {
							ary.push(i.list);
							are.push({
								'name': i.lable,
								'parent': index + 'ew'
							});
							this.citys.push(i);
						})

					})
					are.forEach((items, index) => {
						arrArea.push({
							'name': items.name,
							'value': index + 'es',
							'parent': items.parent
						});

					})
					ary.forEach((itt, index) => {
						itt.forEach((its, indexs) => {
							arrArea.push({
								'name': its.lable,
								'value': its.id + '',
								'parent': index + 'es'
							})
						})
					})

					this.list3 = arrArea
					
					this.$vux.loading.hide();
				}).catch(() => {
					this.$vux.loading.hide();
					// this.$vux.toast.text('getCascadeArea失败1');
				})

			}
		}

	}
</script>

<style lang="less" scoped>
	.vux-cell-box:before {
		border-top: none !important;
	}

	@errorColor: #ff210a;

	.header.vux-popup-header {
		background: #fff;
		height: 1.28rem;
		line-height: 1.28rem;

		.vux-popup-header-right {
			color: #222;
			font-size: 0.3rem;
			font-weight: bold;
			letter-spacing: 0.05rem;
		}
	}

	.vux-popup-header.vux-1px-b::after {
		border-bottom: none;
	}

	.outerDiv {
		width: 100%;
		height: 100vh;

		// background: yellow;
		.outes {
			width: 100%;
			// height: 60vh;
			background: yellow;
			overflow: hidden;
		}
	}

	.vux-close {
		margin-top: 0.08rem;
		margin-bottom: 0.08rem;
	}


	.childInfoWrap {
		width: 100%;
		// min-height: 100vh;
		padding: 0.3rem 0.6rem 0;
		height: auto;
		// background: #fff;
		overflow: hidden;

		h4 {
			font-weight: bold;
			letter-spacing: 0.03rem;
			margin-bottom: 0.32rem;
			font-size: 0.28rem;
			color: #999999;
		}

		.sexRadio {
			width: 100%;
			height: auto;
			overflow: hidden;
			box-sizing: border-box;

			.radioBox {
				.peopleType {
					span {
						font-size: 0.3rem;
						display: block;
						width: 90%;
						margin: 0 auto;
						height: 0.8rem;
						line-height: 0.8rem;
						color: #999;
						border-radius: 0.1rem;
						background: #eee;
						text-align: center;
						letter-spacing: 0.05rem;
						margin-bottom: 0.2rem;
					}
				}

				div:first-child {
					// margin-right: 0.5rem;
				}

				.active {
					span {
						color: #fff;
						box-shadow: 0 0.1rem 0.2rem 0 rgba(88, 118, 239, 0.3);
						border-radius: 0.1rem;
						background: -webkit-linear-gradient(left, #4048EF, #5A7BEF);
						/* Safari 5.1 - 6.0 */
						background: -o-linear-gradient(right, #4048EF, #5A7BEF);
						/* Opera 11.1 - 12.0 */
						background: -moz-linear-gradient(right, #4048EF, #5A7BEF);
						/* Firefox 3.6 - 15 */
						background: linear-gradient(to right, #4048EF, #5A7BEF);
					}
				}

				.active_2 {
					span {
						color: #fff;
						box-shadow: 0 0.1rem 0.2rem 0 rgba(255, 184, 68, 0.3);
						border-radius: 0.1rem;
						background: -webkit-linear-gradient(left, #F3AF3A, #FF7C4C);
						background: -o-linear-gradient(right, #F3AF3A, #FF7C4C);
						background: -moz-linear-gradient(right, #F3AF3A, #FF7C4C);
						background: linear-gradient(to right, #F3AF3A, #FF7C4C);
					}
				}

				.active_3 {
					span {
						color: #fff;
						box-shadow: 0 0.1rem 0.2rem 0 rgba(72, 227, 210, 0.3);
						border-radius: 0.1rem;
						background: -webkit-linear-gradient(left, #75EADE, #47E2D2);
						background: -o-linear-gradient(right, #75EADE, #47E2D2);
						background: -moz-linear-gradient(right, #75EADE, #47E2D2);
						background: linear-gradient(to right, #75EADE, #47E2D2);
					}
				}
			}
		}

		.inputListBox {
			width: 100%;
			height: auto;
			overflow: hidden;
			box-sizing: border-box;
			margin-bottom: 0.3rem;

			.absBox {
				width: 100%;
				height: 1rem;

				i {
					font-size: 0.3rem;
					color: #ef4a4d;
					padding-right: 0.1rem;
				}

				.pos {
					position: relative;
				}

				span {
					border-bottom: 1px solid #f1f1f1;
					display: flex;

					img {
						width: 0.4rem;
						height: 0.4rem;
					}

					input,
					.popiker {
						flex: 1;
						height: 0.8rem;
						line-height: 0.8rem;
						font-size: 0.3rem;
						outline: none;
						border: none;
						width: 100%;
						padding-left: 0.3rem;
						background: rgba(0, 0, 0, 0);
						color: #BBB;
						font-family: 'PingFang-SC-Medium';

						.weui-cell {
							height: 0.9rem;
						}
					}

					.popiker /deep/ .weui-cell {
						padding-left: 0;
						padding-top: 0;
					}

					.popiker /deep/ .vux-popup-picker-value,
					input {
						color: #222;
					}

					.popiker /deep/ .vux-popup-picker-select {
						text-align: left !important;
					}

					.popiker /deep/ .weui-cell__ft::after {
						display: none;
					}

					.vux-cell-box:not(:first-child):before {
						border-top: none
					}

					b {
						color: #222222;
						font-size: 0.3rem;
						font-weight: bold;
						letter-spacing: 0.05rem;
					}
				}
			}
		}
	}

	// 	.main {
	// 		background: #ffffff;
	// 		padding-top: 1rem;
	// 	}

	.hasContentBg {
		background: #f6f7f9;
	}

	.imgIcon {
		width: 0.4rem;
		height: 0.4rem;
	}
</style>
